<template>
  <!--collapse 是否水平折叠收起菜单-->
  <el-menu :style="{ width: isCollapse ? '64px' : '240px' }"
           :default-active="$route.path"
           class="el-menu-vertical-demo"
           background-color="#545c64"
           text-color="ccc"
           active-text-color="#ffd04b"
           style="transition: all .15s linear;overflow: auto;"
           ref="wd"
           @mouseover.stop.native="yiru"
           @mouseleave.stop.native="yichu">
    <!-- 40px -->
    <!--是否水平折叠收起菜单 会影响这里字段的显示 -->
    <h3 style="width:100%">欧陆通</h3>
    <el-menu-item :index="item.path"
                  v-for="item in noChildren"
                  :key="item.path"
                  @click="clickMenu(item)">
      <i :class="'el-icon-' + item.icon"></i>
      <span slot="title"
            style="margin-left:15px;color: #c2c7d0;">{{ item.label }}</span>

    </el-menu-item>
    <el-submenu :index="item.label"
                v-for="(item, index) in hasChildren"
                :key="index">
      <template slot="title">
        <i :class="'el-icon-' + item.icon"></i>
        <span slot="title"
              style="margin-left:15px;color: #c2c7d0;">{{ item.label }}</span>
        <i class="el-submenu__icon-arrow el-icon-arrow-down"
           :style="{ display: isCollapse ? 'none' : 'block' }"></i>
      </template>
      <el-menu-item-group>
        <el-menu-item :index="subItem.path"
                      v-for="(subItem, subIndex) in item.children"
                      :key="subIndex"
                      @click="clickMenu(subItem)"
                      style=" padding: 0 25px;">
          <i :class="'el-icon-' + subItem.icon"
             style="margin-left:10px;"></i>
          <span slot="title"
                style="margin-left:15px;color: #c2c7d0;">{{ subItem.label }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  //计算属性
  computed: {
    //没有子菜单
    noChildren () {
      return this.menu.filter(item => !item.children)
    },
    //有子菜单 (这样设置会有一个问题 就是有子菜单的 永远会在没有子菜单的下面
    hasChildren () {
      return this.menu.filter(item => item.children)
    },
    isCollapse () {
      // 这里的数据就是从vuex取得
      return this.$store.state.tab.isCollapse

    }
  },
  data () {
    return {
      th: true,
      menu: [
        {
          path: '/',
          name: 'home',
          label: '首页',
          icon: 's-home',
          url: 'Home/Home'
        },
        // {
        //   path: '/mall',
        //   name: 'mall',
        //   label: '商品管理',
        //   icon: 'video-play',
        //   url: 'MallManage/MallManage'
        // },
        {
          label: '管理驾驶舱',
          icon: 'video-play',
          children: [
            {
              path: '/view',
              name: 'view',
              label: '信息总览',
              icon: 'setting',
              url: 'MallManage/MallManage'
            },
          ]
        },
        // {
        //   path: '/user',
        //   name: 'user',
        //   label: '用户管理',
        //   icon: 'user',
        //   url: 'UserManage/UserManage'
        // },
        {
          label: '生产管理',
          icon: 'user',
          children: [
            {
              path: '/user1',
              name: 'user1',
              label: '车间综合信息看板',
              icon: 'setting',
              url: 'UserManage/User1'
            },
            {
              path: '/user2',
              name: 'user2',
              label: '产能负荷表',
              icon: 'setting',
              url: 'UserManage/User2'
            },
            {
              path: '/user3',
              name: 'user3',
              label: 'IPC各线别产能看板',
              icon: 'setting',
              url: 'UserManage/User3'
            },
            {
              path: '/user4',
              name: 'user4',
              label: '各制作工厂产能看板',
              icon: 'setting',
              url: 'UserManage/User4'
            },
            {
              path: '/user5',
              name: 'user5',
              label: '专线历史UPH查询',
              icon: 'setting',
              url: 'UserManage/User5'
            },
            {
              path: '/user6',
              name: 'user6',
              label: '近一周产线达成率',
              icon: 'setting',
              url: 'UserManage/User6'
            },
            {
              path: '/user7',
              name: 'user7',
              label: '产线各时段包装达成率',
              icon: 'setting',
              url: 'UserManage/User7'
            },
            {
              path: '/user8',
              name: 'user8',
              label: '产线出勤情况表',
              icon: 'setting',
              url: 'UserManage/User8'
            },
          ]
        },
        {
          label: '设备管理',
          icon: 'location',
          children: [
            {
              path: '/page1',
              name: 'page1',
              label: '预警看板',
              icon: 'setting',
              url: 'Other/PageOne'
            },
            {
              path: '/page2',
              name: 'page2',
              label: '设备看板',
              icon: 'setting',
              url: 'Other/PageTwo'
            }
          ]
        }
      ]

    }
  },
  methods: {
    yiru () {
      if (this.$store.state.tab.isCollapse == true) {
        this.$store.state.tab.isCollapse = false
      }
    },
    yichu () {
      this.$store.state.tab.isCollapse = true
    },
    //跳转路由 根据名称跳转
    clickMenu (item) {
      this.$router.push({ name: item.name })
    }
  }
}
</script>

<style lang="scss" scoped>
.aside :hover {
  width: 200px;
}
.el-menu {
  height: 100%;
  border: none;
  h3 {
    color: #ffffff;
    line-height: 56px;
    text-align: left;
    height: 56px;
    padding-left: 25px;
  }
}
.el-menu-item,
.el-submenu,
.el-submenu__title {
  text-align: left;
  overflow: hidden;
}
</style>
